El efecto hover cambia el aspecto de un elemento cuando se sitúa el puntero sin que sea seleccionado y vuelve a su estado original cuando se retira el puntero.
Para el ejemplo he añadido los estilos de borde que tengo en las imágenes de mis entradas, de esa forma respondo al mismo tiempo a los que me preguntaron por ese detalle.
La diferencia está que para añadir los estilos a las imágenes de los post lo hacemos en:.post img {
......
......
......
}
Si deseamos añadir un borde a las imágenes añadimos antes de ]]></b:skin>
.border img{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
padding: 5px;
background: #ffffff;
border-top: 1px solid #969696;
border-left: 1px solid #969696;
-moz-box-shadow: 2px 2px 4px #696969;
-webkit-box-shadow:2px 2px 4px #696969;
box-shadow:2px 2px 4px #696969;
}
Y en una entrada o gadget de html añadimos:
<div class="border"><img src="url-imagen"/></div>
La imagen se vería de esta forma.
Si además de los estilos para el borde añadimos unos estilos para el efecto hover la misma imagen al pasar el puntero mostraría los nuevos estilos.
.hover img:hover {
padding: 5px;
background:#ffffff;
border-top: 1px solid #475E0B;
border-left: 1px solid #475E0B;
-moz-box-shadow: 2px 2px 4px #9C192A;
-webkit-box-shadow:2px 2px 4px #9C192A;
box-shadow:2px 2px 4px #9C192A;
}
Ver ejemplo 1
ESTILOS [+/-]
Ver ejemplo 2
ESTILOS [+/-]
Ver ejemplo 3
ESTILOS [+/-]
Exente esta esta entrada Ahora A Probarlo :D
:: Gracias por comentar UFE-Activo :)
En firefox (y supongo que en safari) se ve muy bien, queda un exelente efecto ;)
En IExplorer solo se ve bien en la versio 8, es una lastima porque el efecto es muy bonito.
Hay que esperar a que todos los navegadores reconozcan el CSS y se estandaricen
:: Yo no pienso que sea una pena JorG porque los navegadores hay que actualizarlos, de las versiones antiguas deberíamos olvidarnos.
gracias gem@, aprendo muchisimo aca!
gracias otra vez x compartir :)
agrego q con Chrome tambien se ve genial ;)
Que buen efecto Gema ya lo habia visto x otros blog, lastima que a mi no me resulto :(
Hola Gema! Feliz año! gracias por este truco tan bueno.
Hola, eh buscado y e intentado como enmarcar, poner un borde o un separador entre los comentarios pero aun no doy con el resultado y creo que no me vendria mal un poco de ayuda jeje.
Espero y puedas ayudarme
Muchas Gracias
Saludos...
Es lo que estaba buscando, pero no sabía el nombre y apellido ;)
Bárbaro Piedra Preciosa, lo aplicaré en la sidebar, entonces tendré que pensar.
Estoy cuidando a dos pequeños, la mamá ha salido, pintan y me cuentan minuto a minuto lo que hacen jajaja para concentrarme!!!
Besos!!!
:: Gracias por el comentario Saerwen y por la información :)
:: Coke ¿dónde lo has añadido?
:: Igualmente Eva, gracias!!
:: No sabría decirte Djnf porque no he podido ver tu blog :S
:: Graciela cualquier duda en añadir el efecto me dices algo.
Los artistas te acaparan :)
No si he seguido tus pasos a pie de letra, si no me resulta es por que tengo un tipo de cursor distinto que las imagenes las tiene con opacidad, entonces para poder agregar este efecto debo borrar el que tengo y asi se vera...
:: Pedes dejar la opacidad si te gusta y añadir estilos de borde Coke.
ea! muchas gracias! me gusta mucho ese efecto y lo encontre por casualidad, ya he usado un par de trucos tuyos muy útiles.
oye como veo que mucha gente te hace consultas y les ayudas, espero me ayudes a mi también:
en mi blog, en las entradas, por mas que le cambio el formato de la letra, siempre queda super chiquita, no se a qué se deba, sabes algo de eso? no se si le pueda poner un formato default a todo el blog desde la plantilla, o alguna sugerencia?
Wowowow!! :O siempre dando mucho mas de lo que te piden. Muchas gracias por tu ayuda Gema. :D Genial explicación; Voy a probarlo ahora mismo.
:: Respondida tu pregunta en la última entrada Karen ;)
:: Cualquier duda ya me dices algo Toni´s :)
:: Eliminaste tu comentario fede ¿todo bien?
Lo eliminé porque quería poner la cara de asombro ( :0 ) no me salia y siguió sin salirme en el segundo comentario que hice. :S
:: Debe ser la imagen del icono voy a verlo :)
:: Ya funcionan todos :)
:) :'( :( :P :D :$ ;) :-I :X :O |O :S
jajaja esta mañana me dispongo -luego de sacar un poco de tierra, hojas y demás que dejó el bendito viento sur-
¿a que no sabes qué?
Nuevamente los dos a pintar y dibujar, bien les doy las hojas, lápices, lapiceras...a cada rato 'tía mira lo que dibujé!!!
'tía te hago un auto: quieres fórmula 1, 2 o 3 :O
Enterada solo de la l, dije quiero una Ferrari, ahí la tuve, roja y las explicaciones...me quedo asombrada, el mayor tiene 5 y el menor 3.
Son los artistas que hacen que vuelva a la infancia :D
:: Graciela mi sobrino de 9 años pasa muchos ratos conmigo, lo que más le entretiene es hablar de fútbol :O y no veas como habla y habla y habla... sería mucho mejor si pintara ferraris :)
Yo estoy con envidia sana porque cada vez que voy al blog de Graciela veo que ha hecho algo nuevo!!! y yo que no tengo cuerpo ahora para meterme con la plantilla que le haría falta...
pero voy apuntando ideas, eh?
tiembla Gema cuando me de por hacer cambios jajaja
Hola Gem@ !!!
Mirando esta entrada veo que al pinchar en cualquiera de las imágenes que tienes en los ejemplos, te sale una venta sombreado en gris oscuro con la imagen, el título y la X para cerrar dicha ventana.
¿Tienes explicado este truco? Es que que ya he utlizado varios trucos de este estilo en mi blog y no me funciona ninguno. Queía probar con éste.
Gracias
Ya vendrá lo de fútbol supongo, aunque la mamá no los ha enviado aún.
Frente a mi casa tengo una cancha de fútbol, pero maltratan a los niños, ella ha decidido no enviarlos y la tía recontenta :)
Piedra Preciosa has leído que le 'regalamos a Messi' jajaja "de madera" en nuestra selección, ahora la madre ha realizado declaraciones de que no le queremos; de Fútbol nada io ;)
Minimimo I :D vamos que haces cosas bellísimas, que aún no he conseguido aprender.
Besos a las dos!!!
:: Maite te he leído y antes de responder miré si tengo provisiones de tila en la despensa, cuando quieras podemos empezar no hay problema jajajaja
:: Hola Neo lo ves es la ventana modal de Lytebox después de muchas horas para dejarla así con esos estilos. Pero puedes ver como hacerlo
http://gemablog-.blogspot.com/2009/05/lytebox-otra-forma.html
y los resultados:
http://forevergema.blogspot.com/search/label/Lytebox
:: Graciela no leí sobre Messi pero mi sobrino me lo nombra tanto que parece de la familia :D
Tesoro te pregunto:
si deseo aplicar el efecto 1 por ejemplo, la parte del html, la tengo en la sidebar en la historia de la semana, la imagen necesita el link...cómo se hace???
Muchas gracias :D
:: Hola Graciela, para el ejemplo 1 en la plantilla añadimos antes de ]]></b:skin>
.border1 img{
padding: 5px;
background: #ffffff;
border-top: 1px solid #54692A;
border-left: 1px solid #54692A;
-moz-box-shadow: 2px 2px 4px #696969;
-webkit-box-shadow:2px 2px 4px #696969;
box-shadow:2px 2px 4px #696969;
}
.border1 img:hover {
padding: 2px;
background:#FFFFFF;
border: 4px double #9C192A;
-moz-box-shadow: 2px 2px 4px #9C192A;
-webkit-box-shadow:2px 2px 4px #9C192A;
box-shadow:2px 2px 4px #9C192A;
}
Y luego en la entrada donde vamos a añadir la imagen añadimos lo siguiente:
<div class="border1"><img src="url-de-la-imagen"/></div>
Donde dice url-de-la-imagen es el sitio donde pegaremos la url de la imagen a la que deseamos añadir el efecto ;)
Piedra Preciosa he intentado con todos los ejemplos y nada...
en la cajita de la sidebar añado
div class="border1" img src="url-de-la-imagen div
tal como lo dices claro, si pongo todo error html en el coments
gracias!!!
:: He probado tal y como lo tienes ahora mismo Graciela, y este es el resultado en mi blog de %% pruebas yo intentaría con otra imagen, si te fijas la que añadiste es mayor que el tamaño de la sidebar lo que ocurre que tiene un margen blanco que no se aprecia. No debería ser problema porque en todo caso debería mostrase el marco aunque cortando la imagen, es cuestión de probar con una imagen de menor tamaño y vemos que ocurre.
snif snif antes pude apreciar lo bonito que te ha quedado, bien reduje el tamaño y nada :O
No se deja Piedra Preciosa :'(
:: ¿Los estilos están antes de ]]></b:skin> Graciela? :S
Tal como lo dices, si pongo en una entrada hace el efecto, en la sidebar no :'(
:: Graciela estoy buscando tu mail para enviarte algo y no lo veo en tu blog ¿me envías uno y así me quedo con la dirección?
forevergema(arroba)gmail.com
Esta genial, le quedo muy bien a mi blog, Cracias
:: Estupendo Omar :)
Olle amix genial el aporte, vas a mis favoritos en mi blog...
Ahora mi pregunta es, de casualidad sabes como ponerle un limite o un bormde a mis entradas en la pagina e inicio para que no se vea cargado sino delimitado?'
muchas gracias ...
Te y los invito a que visiten mi blog http://atiiempo.blogspot.com/
On Time 2.0
ComenteN,Ayuden, Compartan y Diviértanse...
Salu2.
:: No entiendo tu pregunta Lar2 :O
Muchas Gracias me sirvio para la pagina web
http://www.colombiaguide.co
Hola que tal, tengo una inquietud desde hace rato con respecto al efecto hover del borde en una image: cuando paso el mouse po encima, pega como un salto la imagen. ¿Hay alguna forma de que no pegue ese salto?
Nota: solo los miembros de este blog pueden publicar comentarios.